import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import dateFormat from 'dateformat'

import {
  withStyles,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Avatar,
} from '@material-ui/core'
// import SentimentSatisfiedAlt from '@material-ui/icons/SentimentSatisfiedAlt'

import {
  topicPrimaryStyles,
  topicSecondaryStyles,
} from './styles'

import { tabs } from '../../utils/variable-default'

const Primary = ({ classes, topic }) => {
  const classnames = cx({
    [classes.tab]: true,
    [classes.top]: topic.top,
  })
  return (
    <span className={classes.root}>
      <span className={classnames}>{topic.top ? '置顶' : tabs[topic.tab]}</span>
      <span className={classes.title}>{topic.title}</span>
    </span>
  )
}
const Secondary = ({ classes, topic }) => (
  <span className={classes.root}>
    <span className={classes.userName}>{topic.author.loginname}</span>
    <span className={classes.count}>
      <span className={classes.reply}>{topic.reply_count}</span>
      <span>/</span>
      <span>{topic.visit_count}</span>
    </span>
    <span>{`创建时间:${dateFormat(topic.create_at, 'yyyy-mm-dd')}`}</span>
  </span>
)

Primary.propTypes = {
  classes: PropTypes.object.isRequired,
  topic: PropTypes.object.isRequired,
}
Secondary.propTypes = {
  classes: PropTypes.object.isRequired,
  topic: PropTypes.object.isRequired,
}

const StylesPrimary = withStyles(topicPrimaryStyles)(Primary)
const StylesSecondary = withStyles(topicSecondaryStyles)(Secondary)

const TopicListItem = ({ handleClick, topic }) => (
  <ListItem button onClick={handleClick}>
    <ListItemAvatar>
      <Avatar src={topic.author.avatar_url} />
    </ListItemAvatar>
    <ListItemText
      primary={<StylesPrimary topic={topic} />}
      secondary={<StylesSecondary topic={topic} />}
    />
  </ListItem>
)

TopicListItem.propTypes = {
  topic: PropTypes.object.isRequired,
  handleClick: PropTypes.func.isRequired,
}

export default TopicListItem
